<template>
  <div class="LoginStyleBox">
    <div class="LoginStyleRgba">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13945121728%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648033727&t=ab365f5d8bb9c3886613330010e0e9e7"
        alt=""
      />
    </div>
    <div class="LoginFromBox">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="Username"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item
          label="Password"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
          <a-checkbox v-model:checked="formState.remember"
            >Remember me</a-checkbox
          >
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">Submit</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}
export default defineComponent({
  setup() {
    const formState = reactive<FormState>({
      username: "",
      password: "",
      remember: true,
    });
    const onFinish = (values: any) => {
      console.log("Success:", values);
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log("Failed:", errorInfo);
    };
    return {
      formState,
      onFinish,
      onFinishFailed,
    };
  },
});
</script>

<style>
.LoginStyleBox {
  width: 100%;
  height: 100%;
}
.LoginStyleRgba {
  width: 1000px;
  height: 600px;
  margin: 50px auto;
}
.LoginFromBox {
  top: 160px;
  right: 330px;
  width: 340px;
  height: 280px;
  border-radius: 20px;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
}
.LoginUserIpt {
  width: 260px;
  margin-left: 20px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
}
.LoginPassTpt {
  width: 260px;
  margin-left: 20px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
}
.LoginStyleBtn {
  width: 260px;
  margin-left: 20px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
  background: #1884f2;
  color: #ffff;
  font-size: 16px;
}
.SecurityCode {
  width: 100px;
  position: absolute;
  top: 160px;
  left: 80px;
  margin-left: 140px;
  width: auto;
  border-radius: 5px;
  height: auto;
  background: rgb(243, 246, 250);
}
.IptCode {
  margin-left: 80px;
  height: 35px;
  width: 130px;
  outline: none;
  padding: 5px;
  border-radius: 5px;
}
</style>